<template>
  <div class="dialog-form">
    <div class="form-group">
      <label>标题：</label>
      <input type="text" v-model="formData.title" placeholder="请输入标题" />
      <span class="tip">
        <img src="../../public/img/gantanhao.png" alt="提示图标" class="tip-icon">
        请输入标题
      </span>
    </div>
    <div class="form-group">
      <label>描述：</label>
      <input type="text" v-model="formData.intro" placeholder="请输入描述" />
      <span class="tip">
        <img src="../../public/img/gantanhao.png" alt="提示图标" class="tip-icon">
        请输入描述
      </span>
    </div>
    <div class="form-group">
      <label>排序：</label>
      <input type="text" v-model.number="formData.sort" placeholder="请输入排序" />
      <span class="tip">
        <img src="../../public/img/gantanhao.png" alt="提示图标" class="tip-icon">
        请输入排序
      </span>
    </div>
    <div class="form-group">
      <label style="width: 30%;">外部展示图片：</label>
      <div class="file-upload">
        <!-- 显示已选图片及删除按钮 -->
        <div v-if="formData.imageUrl" class="selected-image" style="width: 70%;">
          <img :src="formData.imageUrl" alt="已选图片" style="max-width: 40px; max-height: 40px; margin-right: 5px;">
          <button @click="formData.imageUrl = ''" class="delete-btn">删除</button>
        </div>
        <!-- 未选图片时显示选择按钮 -->
        <div v-else style="width: 70%;">
          <input type="file" @change="handleFileChange" style="display: none;" ref="fileInput">
          <button class="btn" @click="$refs.fileInput.click()">选择文件</button>
          <span>未选择文件</span>
        </div>
      </div>
      <span class="tip">
        <img src="../../public/img/gantanhao.png" alt="提示图标" class="tip-icon">
        最佳尺寸为 180*180
      </span>
    </div>
    <div class="form-group">
      <label>内容：</label>
      <textarea rows="3" v-model="formData.content" placeholder="请填写内容"></textarea>
      <span class="tip">
        <img src="../../public/img/gantanhao.png" alt="提示图标" class="tip-icon">
        请填写内容
      </span>
    </div>
    <div class="btn-group">
      <button @click="handleSubmit" class="submit-btn">提交</button>
      <button @click="handleCancel" class="return-btn">返回</button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  editData: {
    type: Object,
    default: () => ({})
  }
});

const formData = ref({
  title: '',
  intro: '',
  sort: 0,
  content: '',
  imageUrl: '' 
});

watch(() => props.editData, (newVal) => {
  if (newVal) {
    formData.value = {
      title: newVal.title || '',
      intro: newVal.intro || '',
      sort: newVal.sort || 0,
      content: newVal.content || '', 
      imageUrl: newVal.imageUrl || '' 
    };
  } else {
    formData.value = {
      title: '',
      intro: '',
      sort: 0,
      content: '',
      imageUrl: ''
    };
  }
}, { immediate: true });

const emit = defineEmits(['submit', 'cancel']);

const handleSubmit = () => {
  emit('submit', formData.value);
};

const handleCancel = () => {
  emit('cancel');
};

// 处理文件选择
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    formData.value.imageUrl = URL.createObjectURL(file);
  }
};
</script>

<style scoped>
.dialog-form {
  width: 100%;
}
.form-group {
  width: 100%;
  margin-bottom: 20px;
}
.form-group label {
  display: inline-block;
  width: 15%;
  text-align: right;
  margin-right: 10px;
  vertical-align: top; 
}
.form-group input[type="text"],
.form-group textarea {
  width: 60%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.tip {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #999;
  margin-left: 80px; 
  display: flex;
  align-items: center;
}
.tip-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.btn-group {
  margin-top: 20px;
  text-align: center;
}
.btn-group button {
  padding: 6px 12px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.submit-btn {
  background-color: #f00;
  color: #fff;
}
.file-upload {
  display: flex;
  align-items: center;
  margin-left: 80px; 
}
.selected-image {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.delete-btn {
  margin-left: 5px;
  padding: 2px 6px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
</style>